<template>
    <div>
        <NewNav></NewNav>
    </div>
    <div class="header">
        <div class="photo">
            <h4 class="shouye">
                <router-link to="/home" class="navbar-link">首页</router-link>
                <el-divider direction="vertical" />课程详细
            </h4>
            <h1 class="people">
                前端框架应用项目开发(已选105人)
            </h1>
            <div class="all" style="display: flex;justify-content: space-between;">
                <div class="left"><img src="https://codelover.club/icons/course/icon1.svg" alt="touxiang"
                        style="width: 30px;margin-left: 100px;margin-top: 20px;"></div>
                <div class="right" style="margin-right: 2000px;margin-top: 10px;">
                    <div class="teacher">
                        <h4 style="width: 50px;">刁建忠</h4>
                    </div>
                    <div class="jiaoshi">
                        <h4 style="margin-left: -105px; background-color: burlywood;width: 80px;">教师</h4>
                    </div>
                </div>
            </div>
            <div class="dao">
                <div class="d">
                    <p style="margin-left: 30px;font-size: 20px;height: 20px;">已学 80 %</p>
                    <br>
                    <el-progress :text-inside="true" :stroke-width="26" :percentage="80"
                        style="width: 300px;margin-left: 20px;height: 20px;" />
                    <br>
                    <p style="margin-left: 30px;font-size: 12px;height: 5px;">已学：8 在学：2 待学：0</p>
                    <br>
                    <button class="search-icon" style="margin-left: 60px;">继续学习</button>
                </div>
            </div>
        </div>
        <div class="container0">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="任务" name="first">
                    <div class="content0">
                        <p>简介： 前端框架应用项目开发</p>
                        <br>
                        <p>课程目标：掌握前端框架在前端项目开发中的应用，熟悉当前市场主流的前端项目开发方法</p>
                    </div>
                    <div class="expandable-panel">
                        <div class="demo-collapse">
                            <el-collapse v-model="activeNames" @change="handleChange">
                                <el-collapse-item title="前端框架技术快速入门" name="1">
                                    <el-collapse-item title="Vue3开发初体验" name="5"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <el-collapse-item title="Vue3组件化开发" name="6"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <el-collapse-item title="Vue3前端基础刷题" name="7"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                </el-collapse-item>

                                <el-collapse-item title="Vue3的路由与状态管理" name="2">
                                    <el-collapse-item title="Vue3路由的使用" name="8"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <el-collapse-item title="电影列表项目" name="9"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <el-collapse-item title="Vue自动化测试" name="10"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                </el-collapse-item>

                                <el-collapse-item title="开源组件的使用与开发" name="3">
                                    <el-collapse-item title="使用UI组件库" name="11"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <el-collapse-item title="common-list开源组件" name="12"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                </el-collapse-item>

                                <el-collapse-item title="期末作业考核" name="4">
                                    <el-collapse-item title="Vue综合项目" name="13"></el-collapse-item>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                    <div style="margin-left: 30px;"></div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="问答³" name="second">
                    <el-button @click="showSearch = !showSearch" type="primary"
                        style="margin-top: 60px;">我要提问</el-button>
                    <div v-if="showSearch">
                        <el-input v-model="input" style="width: 1000px;margin-left: 30px;margin-left: 118px;"
                            placeholder="请输入标题" />
                        <br>
                        <br>
                        <el-input v-model="textarea" style="width: 1000px;margin-left: 118px;" :rows="4" type="textarea"
                            placeholder="输入问题详细~" />
                        <el-button type="primary" style="margin-left: 30px;margin-bottom: 60px;">发表</el-button>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="进度榜" name="third" style="height: 450px;width: 1240px;overflow-y: scroll;">
                    <el-table :data="tableData" :default-sort="{ prop: 'number', order: 'descending' }"
                        style="width: 100%">
                        <el-table-column prop="name" label="姓名" width="180" />
                        <el-table-column prop="class" label="班级" sortable width="180" />
                        <el-table-column prop="number" label="学号" sortable :formatter="formatter" />
                        <el-table-column class="demo-progress" prop="percentage" label="任务统计" :format="format" sortable
                            width="180" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="投票榜" name="fourth">
                    <div class="yinying">
                        <div class="kongbai"></div>
                        <div class="button-group">
                            <div class="content2">
                                <p class="piao">《前端框架应用项目开发》期末作品投票
                                    <el-button type="primary">投票</el-button>
                                    <el-button type="primary">排名</el-button>
                                </p>
                            </div>
                        </div>
                        <br>
                        <hr>
                        <br>
                        <div class="zi">
                            <p>
                                简介:《前端框架应用项目开发》期末作品投票,其中评审评分占50%,同学评分占50%
                            </p>
                            <p>
                                投票时间:4年5月15日 0:00:00结束时间:2024年5月20日 0:00:00
                            </p>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    <div>
        <bottom></bottom>
    </div>
</template>
<style scoped>
.shouye,
.people {
    margin-left: 180px;
    color: white;
}

.teacher {
    margin-left: 120px;
    color: white;
}

.jiaoshi {
    margin-left: 230px;
    color: white;
}

.container0 {
    position: absolute;
    margin-top: 230px;
}

.header {
    display: flex;
    width: 100vw;
    height: 200wh;
    margin-top: -410px;
    margin-left: -330px;
}

.photo {
    padding: 50px;
    margin-top: 10px;
    width: 1786px;
    background-image: url(https://codelover.club/static/img/courseBg.43bcf71c.png);
    position: absolute;
}

.search-icon {
    background-color: rgb(219, 66, 191);
    border: none;
    border-radius: 20px;
    color: white;
    width: 50px;
    height: 30px;
}

.content0 {
    color: black;
    position: relative;
    padding: 10px;
    border: 1px #f1ecec solid;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
}

.expandable-panel {
    border: 1px solid #ccc;
    margin-top: 20px;
}

.demo-collapse {
    padding: 6px;
    background-color: #f5f5f5;
    cursor: pointer;
}

.kongbai {
    width: 100px;
    height: 20px;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-tabs {
    margin-left: 80px;
}

.yinying {
    width: 1280px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    border: 1px #f1ecec solid;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
}

.content2 {
    margin-top: -0px;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    max-width: 600px;
}

.d {
    position: relative;
    width: 100%;
    color: rgb(14, 11, 11);
}

.dao {
    position: absolute;
    border: 3px #fbf7f7 solid;
    width: 350px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px 20px 20px 20px;
    margin-left: 1200px;
    box-shadow: 0 8px 16px 0 rgba(7, 23, 39, .1);
    margin-top: -170px;
    background-color: #fff;
}

.dao:hover {
    transition: all 0.5s;
    transform: perspective(500px) translateZ(20px);
}

.search-icon {
    background-color: rgb(239, 129, 50);
    border: none;
    border-radius: 20px;
    color: white;
    width: 230px;
    height: 40px;
}



.content0:hover {
    transition: all 0.5s;
    transform: perspective(50px) translateZ(1px);
}

.expandable-panel:hover {
    transition: all 0.5s;
    transform: perspective(50px) translateZ(1px);
}

.yinying:hover {
    transition: all 0.5s;
    transform: perspective(50px) translateZ(1px);
}

.button-group {
    margin-right: 500px;
}

.zi {
    font-size: small;
    margin-right: 300px;
}
</style>

<script setup lang="ts">
import type { TableColumnCtx } from 'element-plus'
import type { TabsPaneContext } from 'element-plus';
import NewNav from './NewNav.vue';
import bottom from './bottom.vue';
import { ref } from 'vue';
const textarea = ref('')
const input = ref('')
const showSearch = ref(false);

const format = (percentage: 100) => (percentage === 100 ? 'Full' : `${percentage}%`)

const activeNames = ref([''])
const handleChange = (val: string[]) => {
    console.log(val)
}

const activeName = ref('first');
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event);
};

interface User {
    name: string,
    class: string,
    number: string,
    percentage: string,
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
    return row.number
}

const tableData: User[] = [
    {
        name: '刁建忠',
        class: '20软件技术2班',
        number: '12345678',
        percentage: "100",
    }, {
        name: '黄显铸',
        class: '22软件技术3班',
        number: '20001054',
        percentage: "100",
    }, {
        name: '吴怀民',
        class: '22软件技术3班',
        number: '20001739',
        percentage: "100",
    }, {
        name: '冯梓轩',
        class: '22软件技术3班',
        number: '20002830',
        percentage: "100",
    }, {
        name: '王生权',
        class: '22软件技术3班',
        number: '20005614',
        percentage: "100",
    }, {
        name: '赵新宇',
        class: '22软件技术3班',
        number: '20005680',
        percentage: "100",
    }, {
        name: '周盛华',
        class: '21软件技术1班',
        number: '22000000',
        percentage: "100",
    }, {
        name: '陈杰淇',
        class: '22软件技术3班',
        number: '22000066',
        percentage: "100",
    }, {
        name: '严子健',
        class: '22软件技术1班',
        number: '22000111',
        percentage: "100",
    }, {
        name: '赖明畅',
        class: '22软件技术1班',
        number: '22000530',
        percentage: "100",
    }, {
        name: '刘蔚岚',
        class: '22软件技术1班',
        number: '22000582',
        percentage: "100",
    }, {
        name: '陈锶桂',
        class: '22软件技术1班',
        number: '22000593',
        percentage: "100",
    }, {
        name: '沈冠廷',
        class: '22软件技术1班',
        number: '22000608',
        percentage: "100",
    },
]
</script>